<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>组织机构</title>
    <meta name="viewport" content="width=device-width,target-densitydpi=high-dpi,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0"/>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link href="css/bootstrap.min.css" rel="stylesheet" />
    <link href="fontAwesome/css/font-awesome.min.css" rel="stylesheet">
    <link href="css/common.css" rel="stylesheet" />
    <link href="css/main.css" rel="stylesheet" />
    <script type="text/javascript" src="js/jquery.min.js"></script>
    <script type="text/javascript" src="js/bootstrap.js"></script>
 </head>
<body>
  <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
          <span class="sr-only">Toggle navigation</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">渠道管理<span class="f12">&nbsp;&nbsp;ERP</span></a>
    </div>
    <div id="navbar" class="collapse navbar-collapse">
      <ul class="nav navbar-nav">
        <li class="active"><a href="javascript:;">首页</a></li>
        <li><a href="javascript:;">机构管理</a></li>
        <li><a href="javascript:;">报备管理</a></li>
      </ul>
      <div class="login-settings">
        <a href="javascript:;" class="clearfix"  data-toggle="popover">
          <div class="loginImg"></div>
          <div class="loginName">木头</div>
          <i class="fa fa-caret-down"></i>
        </a>
      </div>
    </div>
  </nav>
  <div class="sidebar">
    <ul class="nav nav-sidebar">
      <li class="nav-parent">
          <a href="#" class="nav-parent-title"><i class="fa fa-th-large iconLeft"></i>首页<i class="fa fa-angle-down iconRight"></i></a>
          <ul class="nav nav-children">
              <li><a href="javascript:;"><i class="fa fa-circle iconLeft"></i>二级导航</a></li>
              <li><a href="javascript:;"><i class="fa fa-circle iconLeft"></i>二级导航</a></li>
              <li><a href="javascript:;"><i class="fa fa-circle iconLeft"></i>二级导航</a></li>
          </ul>
      </li>
      <li class="nav-parent active">
          <a href="#" class="nav-parent-title"><i class="fa fa-sitemap iconLeft"></i>机构管理<i class="fa fa-angle-down iconRight"></i></a>
          <ul class="nav nav-children">
              <li><a href="javascript:;"><i class="fa fa-circle iconLeft"></i>二级导航</a></li>
              <li><a href="javascript:;"><i class="fa fa-circle iconLeft"></i>二级导航</a></li>
              <li><a href="javascript:;"><i class="fa fa-circle iconLeft"></i>二级导航</a></li>
          </ul>
      </li>
      <li class="nav-parent">
          <a href="#" class="nav-parent-title"><i class="fa fa-edit iconLeft"></i>报备管理<i class="fa fa-angle-down iconRight"></i></a>
          <ul class="nav nav-children">
              <li><a href="javascript:;"><i class="fa fa-circle iconLeft"></i>二级导航</a></li>
              <li><a href="javascript:;"><i class="fa fa-circle iconLeft"></i>二级导航</a></li>
              <li><a href="javascript:;"><i class="fa fa-circle iconLeft"></i>二级导航</a></li>
              <li><a href="javascript:;"><i class="fa fa-circle iconLeft"></i>二级导航</a></li>
              <li><a href="javascript:;"><i class="fa fa-circle iconLeft"></i>二级导航</a></li>
          </ul>
      </li>
    </ul>
  </div>
  <div class="main">
    <div class="main-content">
      <div class="row">
        <div class="col-sm-4 col-md-3">
          <ul class="template-title-fl">
            <li><button type="button" class="btn btn-default btn-theme addBtn" data-toggle="modal" data-target="#myModal">新增</button></li>
            <li><button type="button" class="btn btn-default btn-theme" data-toggle="modal" data-target="#delModal">修改</button></li>
            <li><button type="button" class="btn btn-default btn-theme" data-toggle="modal" data-target="">查询</button></li>
            <li><button type="button" class="btn btn-default">清空</button></li>
          </ul>
          <div class="table-filter"></div>
        </div>
        <div class="col-sm-8 col-md-9">
          <ul class="template-title-fls">
            <li><input type="text"  class="form-control-sm" placeholder="姓名"/></li>
            <li>
              <select class="form-control-sm">
                <option>所有角色</option>
                <option>1</option>
                <option>2</option>
                <option>3</option>
                <option>4</option>
              </select>
            </li>
            <li>
              <select class="form-control-sm">
                <option>所有角色</option>
                <option>1</option>
                <option>2</option>
                <option>3</option>
                <option>4</option>
              </select>
            </li>
            <li><button type="button" class="btn btn-default btn-theme addBtn2" data-toggle="modal" data-target="#myModal">新增</button></li>
            <li><button type="button" class="btn btn-default btn-theme">查询</button></li>
          </ul>
          <div class="table-responsive">
            <table class="table table-striped table-bordered min-width-790">
              <thead>
                <tr>
                  <th width="10%">序号</th>
                  <th width="15%">员工姓名</th>
                  <th width="15%">联系电话</th>
                  <th width="10%">部门</th>
                  <th width="10%">状态</th>
                  <th width="10%">角色</th>
                  <th width="30%">操作</th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <td>001</td>
                  <td>A</td>
                  <td>13813831577</td>
                  <td>创业部</td>
                  <td><span class="stateOne">离职</span></td>
                  <td>创业先锋</td>
                  <td>
                    <a href="javascrpt:;" class="btnA edit">编辑</a>
                    <a class="btnA delete-btn">删除</a>
                    <a href="javascrpt:;" class="btnA query">查询</a>
                    <a href="javascrpt:;" class="btnA initial">密码初始</a>
                  </td>
                </tr>
                <tr>
                  <td>002</td>
                  <td>B</td>
                  <td>13813831577</td>
                  <td>创业部</td>
                  <td><span class="stateTwo">离职</span></td>
                  <td>创业先锋</td>
                  <td>
                    <a href="javascrpt:;" class="btnA edit">编辑</a>
                    <a class="btnA delete-btn">删除</a>
                    <a href="javascrpt:;" class="btnA query">查询</a>
                    <a href="javascrpt:;" class="btnA initial">密码初始</a>
                  </td>
                </tr>
                <tr>
                  <td>003</td>
                  <td>C</td>
                  <td>13813831577</td>
                  <td>创业部</td>
                  <td><span class="stateOne">离职</span></td>
                  <td>创业先锋</td>
                  <td>
                    <a href="javascrpt:;" class="btnA edit">编辑</a>
                    <a class="btnA delete-btn">删除</a>
                    <a href="javascrpt:;" class="btnA query">查询</a>
                    <a href="javascrpt:;" class="btnA initial">密码初始</a>
                  </td>
                </tr>
                <tr>
                  <td>004</td>
                  <td>D</td>
                  <td>13813831577</td>
                  <td>创业部</td>
                  <td><span class="stateTwo">离职</span></td>
                  <td>创业先锋</td>
                  <td>
                    <a href="javascrpt:;" class="btnA edit">编辑</a>
                    <a class="btnA delete-btn">删除</a>
                    <a href="javascrpt:;" class="btnA query">查询</a>
                    <a href="javascrpt:;" class="btnA initial">密码初始</a>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>  
  </div>
  <!-- 弹出层 -->
  <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
          <h4 class="modal-title" id="myModalLabel">title</h4>
        </div>
        <div class="modal-body"></div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
          <button type="button" class="btn checkedBtn">确定</button>
        </div>
      </div>
    </div>
  </div>
</div>
</body>
<script type="text/javascript" src="js/main.js"></script>
<script type="text/javascript">
    $(function(){
        // 弹出框内容
        $(".addBtn").click(function(){
          $("#myModalLabel").html("新增部门");
          $("#myModal .modal-body").html('<div class="form-horizontal">'+
                                            '<div class="form-group">'+
                                              '<label for="" class="col-sm-4 control-label">新增部门：</label>'+
                                              '<div class="col-sm-8">'+
                                                '<input type="text" class="form-control" placeholder="请输入部门">'+
                                              '</div>'+
                                            '</div>'+
                                            '<div class="form-group">'+
                                              '<label for="" class="col-sm-4 control-label">上级部门：</label>'+
                                              '<div class="col-sm-8">'+
                                                '<select class="form-control"><option>请选择</option><option>1</option><option>2</option></select>'+
                                              '</div>'+
                                            '</div>'+
                                            '<div class="form-group">'+
                                              '<label for="" class="col-sm-4 control-label">新增部门：</label>'+
                                              '<div class="col-sm-8">'+
                                                '<input type="text" class="form-control" placeholder="请输入部门">'+
                                              '</div>'+
                                            '</div>'+
                                            '<div class="form-group">'+
                                              '<label for="" class="col-sm-4 control-label">部门编号：</label>'+
                                              '<div class="col-sm-8">'+
                                                '<input type="text" class="form-control" placeholder="请输入部门编号">'+
                                              '</div>'+
                                            '</div>'+
                                            '<div class="form-group">'+
                                              '<label for="" class="col-sm-4 control-label">备注：</label>'+
                                              '<div class="col-sm-8">'+
                                                '<textarea class="form-control" rows="3" placeholder="备注"></textarea>'+
                                              '</div>'+
                                            '</div>'+
                                          '</div>');
        })
        $(".addBtn2").click(function(){
          $("#myModalLabel").html("新增员工");
          $("#myModal .modal-body").html('<div class="form-horizontal">'+
                                            '<div class="form-group">'+
                                              '<label for="" class="col-sm-4 control-label">姓名：</label>'+
                                              '<div class="col-sm-8">'+
                                                '<input type="text" class="form-control" placeholder="请输入姓名">'+
                                              '</div>'+
                                            '</div>'+
                                            '<div class="form-group">'+
                                              '<label for="" class="col-sm-4 control-label">手机（帐号）：</label>'+
                                              '<div class="col-sm-8">'+
                                                '<input type="text" class="form-control" placeholder="请输入手机、帐号">'+
                                              '</div>'+
                                            '</div>'+
                                            '<div class="form-group">'+
                                              '<label for="" class="col-sm-4 control-label">密码：</label>'+
                                              '<div class="col-sm-8">'+
                                                '<input type="text" class="form-control" placeholder="请输入密码">'+
                                              '</div>'+
                                            '</div>'+
                                            '<div class="form-group">'+
                                              '<label for="" class="col-sm-4 control-label">确认密码：</label>'+
                                              '<div class="col-sm-8">'+
                                                '<input type="text" class="form-control" placeholder="请确认密码">'+
                                              '</div>'+
                                            '</div>'+
                                            '<div class="form-group">'+
                                              '<label for="" class="col-sm-4 control-label">所属部门：</label>'+
                                              '<div class="col-sm-8">'+
                                                '<select class="form-control"><option>请选择</option><option>1</option><option>2</option></select>'+
                                              '</div>'+
                                            '</div>'+
                                            '<div class="form-group">'+
                                              '<label for="" class="col-sm-4 control-label">银行卡号：</label>'+
                                              '<div class="col-sm-8">'+
                                                '<input type="text" class="form-control" placeholder="请输入银行卡号">'+
                                              '</div>'+
                                            '</div>'+
                                            '<div class="form-group">'+
                                              '<label for="" class="col-sm-4 control-label">状态：</label>'+
                                              '<div class="col-sm-8">'+
                                                '<select class="form-control"><option>请选择</option><option>1</option><option>2</option></select>'+
                                              '</div>'+
                                            '</div>'+
                                            '<div class="form-group">'+
                                              '<label for="" class="col-sm-4 control-label">数据查看权限：</label>'+
                                              '<div class="col-sm-8">'+
                                                '<select class="form-control"><option>请选择</option><option>1</option><option>2</option></select>'+
                                              '</div>'+
                                            '</div>'+
                                          '</div>');
        })

        $("body").on('click','#delModal .checkedBtn',function(){
          $(".modal").modal('hide');
        })
    })
</script>
</html>
